<template>
	<div id="main" ref="chartContainer" style="width: 100%; height: 95%;" v-if="pageflag"></div>
	<Reacquire v-else @onclick="getData" style="line-height: 200px;">
		重新获取
	</Reacquire>
</template>

<script>
import * as echarts from 'echarts';
import { currentGET } from 'api/modules';

export default {
	data() {
		return {
			regionCode: 'china',
			pageflag: true,
			chartData: [],
			months: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
			chartInstance: null,
			timer: null,
		};
	},
	created() {
		this.getData('china');
	},
	mounted() {
		this.initChart();
		window.addEventListener('resize', this.resizeChart);
	},
	beforeDestroy() {
		this.clearData();
		window.removeEventListener('resize', this.resizeChart);
	},
	methods: {
		initChart() {
			this.chartInstance = echarts.init(this.$refs.chartContainer);
			this.updateChart();
		},
		updateChart() {
			// 计算 this.chartData 中的数据的最小值
			const minValue = Math.min(...this.chartData.map(d => d[1]));
			const seasonColors = ["#3FB32F", "#ca8135", "#B3612F", "#477f58"]; // 春、夏、秋、冬
			const option = {
				legend: {
					show: true,
				},
				grid: {
					top: 100,
				},
				angleAxis: {
					type: 'category',
					data: this.months,
					axisLine: {
						show: false,
						lineStyle: {
							color: "#005b30",
						},
					},
					axisLabel: {
						show: true,
						fontFamily: "Microsoft YaHei",
						fontSize: 16,
						color: "#005b30",
					},
					axisTick: {
						show: false,
					},
				},
				tooltip: {
					show: true,
					formatter: (params) => {
						const id = params.dataIndex;
						return (
							this.months[id] +
							'<br>生日人数：' +
							this.chartData[id][1]
						);
					},
					backgroundColor: "#f8faf7",
					borderColor: "#009a44",
					borderWidth: 1.5,
					shadowColor: "#00000060",
					shadowOffsetX: 0,
					shadowOffsetY: 0,
					shadowBlur: 12,
					textStyle: {
						fontSize: 20,
						color: "#233a18",
					},
				},
				radiusAxis: {
					show: false, // 隐藏全部
					min: 0,
					axisLine: {
						show: false, // 隐藏半径坐标轴
					},
					axisLabel: {
						show: false, // 隐藏半径坐标轴标签
					},
					axisTick: {
						show: false, // 隐藏半径坐标轴刻度线
					},
				},
				polar: {},
				series: [
					{
						type: 'bar',
						itemStyle: {
							color: '#f8faf7', // 内环透明部分
						},
						data: this.chartData.map(() => minValue * 0.7 + 1), // 使用最小值
						coordinateSystem: 'polar',
						stack: 'Min Max',
						silent: true, // 设置为静默，不响应交互事件
					},
					{
						type: 'bar',
						itemStyle: {
							color: (params) => {
								let month = params.dataIndex + 1;
								if (month >= 3 && month <= 5) {
									return seasonColors[0];
								} else if (month >= 6 && month <= 8) {
									return seasonColors[1];
								} else if (month >= 9 && month <= 11) {
									return seasonColors[2];
								} else {
									return seasonColors[3];
								}
							},
						},
						showBackground: true,
						backgroundStyle: {
							color: "#e5eae3",
						},
						data: this.chartData.map((d) => d[1]),
						coordinateSystem: 'polar',
						stack: 'Min Max',
					},
				],
			};
			this.chartInstance.setOption(option);
			this.resizeChart(); // 初始化时调整大小
		},
		resizeChart() {
			if (this.chartInstance) {
				this.chartInstance.resize();
			}
		},
		getData(regionCode) {
			this.regionCode = regionCode;
			this.pageflag = true;
			const fetchData = (region) => {
				return this.$axios.get(region === 'china' || region === '100000'
					? '/api/result/birthmonth'
					: `/api/result/birthmonth/${region}`);
			};

			fetchData(regionCode).then((res) => {
				if (!this.timer) {
					console.log("生日月份分布", res);
				}
				if (res.code === 0) {
					const rawData = res.data;
					const processedData = Array.from({ length: 12 }, () => [0, 0]); // 初始化长度为12的数组，每个元素为 [0, 0]

					Object.keys(rawData).forEach(key => {
						const index = parseInt(key, 10) - 1;
						const value = rawData[key];
						processedData[index] = [
							0,
							value
						];
					});

					this.chartData = processedData;
					this.updateChart(); // 更新图表
				} else {
					this.pageflag = false;
					this.$Message.warning(res.message);
				}
			});
		},
		switper() {
			if (this.timer) {
				return;
			}
			let looper = () => {
				this.getData(this.regionCode);
			};
			this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
		},
	},
};
</script>

<style scoped>
#main {
	width: 100%;
	height: 100%;
}
</style>
